<template>
    <div class="application">
        <Header></Header>
        <div class="group-store">
            <div class="headers-1">
                <div>
                    <img src="../../../static/img/logo_1.png" alt="">
                </div>
                <h2>4s集团店</h2>
            </div>
            <div class="list-1">
                <ul>
                    <li v-for="(applicationList_1s, index) in applicationList_1" :key="index">
                        <div>
                            <img :src="applicationList_1s.cover" alt="">
                        </div>
                        <p>{{applicationList_1s.name}}</p>
                    </li>
                </ul>
            </div>
        <div class="factory">
            <div class="headers-2">
                <div>
                    <img src="../../../static/img/logo_1.png" alt="">
                </div>
                <h2>整车合作厂家</h2>
            </div>
             <div class="list-2">
                <ul>
                    <li v-for="(applicationList_2s, index) in applicationList_2" :key="index">
                        <div>
                            <img :src="applicationList_2s.cover" alt="">
                        </div>
                        <p>{{applicationList_2s.name}}</p>
                    </li>
                </ul>
            </div>
        </div>
        </div>
        <Interactive></Interactive>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '../productVideo/components/Header'
import Interactive from '../interactive/Interactive'
import Footer from '../home/components/Footer'
export default {
    name: 'Application',
    data(){
        return {
            applicationList_1: [],
            applicationList_2: []
        }
    },
    components: {
        Header,
        Footer,
        Interactive
    },
    created(){
        this.axios.get('/ads?type=4s')
        .then((res) => {
            this.applicationList_1 = res.data.data;
            console.log(res.data.data);
        })
        .catch((error) => {
            console.log(error);
        })
        this.axios.get('/ads?type=car_company')
        .then((respones) => {
            this.applicationList_2 = respones.data.data;
            console.log(respones.data.data);
        })
        .catch((error) => {
            console.log(error);
        })
    }
}
</script>
<style scoped>
.application{
    width: 100%;
    height: auto;
    padding-bottom: .97rem;
}
.application .group-store{
    margin-top: .2rem;
}
.application .group-store .headers-1{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
}
.application .group-store .headers-1 div{
    width: .53rem;
    height: .53rem;
    float: left;
    margin-left: .1rem;
}
.application .group-store .headers-1 div img{
    width: 100%;
    height: auto;
}
.application .group-store .headers-1 h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.application .group-store .list-1{
    width: 6.7rem;
    height: auto;
    margin-left: .3rem;
}
.application .group-store .list-1 ul li{
    width: 1.7rem;;
    height: auto;
    margin-left: .53rem;
    display: inline-block;
    text-align: center;
    margin-top: .35rem;
}
/* .application .group-store .list-1 ul li:nth-child(1),.application .group-store .list-1 ul li:nth-child(4),.application .group-store .list-1 ul li:nth-child(8),.application .group-store .list-1 ul li:nth-child(12),.application .group-store .list-1 ul li:nth-child(16),.application .group-store .list-1 ul li:nth-child(20){
    margin-left: 0;
} */
.application .group-store .list-1 ul li div{
    width: 1.7rem;
    height: 1rem;
}
.application .group-store .list-1 ul li div img{
    width: 1rem;
    height: auto;
}
.application .factory{
    margin-top: .6rem;
    /* margin-bottom: .5rem; */
    padding-bottom: .3rem;
}
.application .factory .headers-2{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
}
.application .factory .headers-2 div{
    width: .53rem;
    height: .53rem;
    float: left;
    margin-left: .1rem;
}
.application .factory .headers-2 div img{
    width: 100%;
    height: auto;
}
.application .factory .headers-2 h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.application .factory .list-2{
    width: 6.7rem;
    height: auto;
    margin-left: .3rem;
}
.application .factory .list-2 ul li{
    width: 1.7rem;;
    height: auto;
    margin-left: .53rem;
    display: inline-block;
    text-align: center;
    margin-top: .35rem;
}
/* .application .group-store .list-1 ul li:nth-child(1),.application .group-store .list-1 ul li:nth-child(5),.application .group-store .list-1 ul li:nth-child(9),.application .group-store .list-1 ul li:nth-child(13),.application .group-store .list-1 ul li:nth-child(17),.application .group-store .list-1 ul li:nth-child(21){
    margin-left: 0;
} */
.application .factory .list-2 ul li div{
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
}
.application .factory .list-2 ul li div img{
    width: 100%;
    height: auto;
}
@media screen and (max-width: 362px) and (min-width: 358px) {
.application .group-store .list-1{
    width: 7.1rem;
    height: auto;
    margin: 0 auto;
}
.application .group-store .list-1 ul li{
    width: 2.9rem;;
    height: auto;
    margin-left: .4rem;
}
.application .group-store .list-1 ul li div{
    width: 1.75rem;
    height: 1rem;
    margin: 0 auto;
}
.application .factory .list-2{
    width: 7.1rem;
    height: auto;
    margin: 0 auto;
}  
.application .factory .list-2 ul li{
    width: 1.75rem;;
    height: auto;
    margin-left: .48rem;
}
.application .factory .list-2 ul li div{
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
}
.application .factory .list-2 ul li div img {
    width: 100%;
    height: auto;
}
}
@media screen and (max-width: 320px) and (min-width: 320px) {
.application .group-store .list-1{
    width: 7.1rem;
    height: auto;
    margin: 0 auto;
}
.application .group-store .list-1 ul li{
    width: 2.9rem;;
    height: auto;
    margin-left: .4rem;
}
.application .group-store .list-1 ul li div{
    width: 2rem;
    height: 1rem;
    margin: 0 auto;
}
.application .factory .list-2{
    width: 7.3rem;
    height: auto;
    margin: 0 auto;
}   
.application .factory .list-2 ul li{
    width: 2rem;;
    height: auto;
    margin-left: .3rem;
}
.application .factory .list-2 ul li div{
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
}
.application .factory .list-2 ul li div img{
    width: 100%;
    height: auto;
}
}
</style>
